<mat-card>
  <mat-card-title>Mock Data Server</mat-card-title>
  <mat-card-subtitle
    >Prototype against a real API server with mock data</mat-card-subtitle
  >
  <mat-divider></mat-divider>
  <mat-card-content>
    <p>
      <a href="https://github.com/Teradata/covalent-quickstart"
        >Covalent Quickstart</a
      >
      includes the ultimate prototyping tool, a localhost Mock API!
    </p>
    <p>
      With the mock API server, you can develop against realistic API service
      endpoints, and model the mock data closely to your production data!
    </p>
    <p>
      The mock api server is called
      <a href="https://github.com/Teradata/covalent-data">Covalent Data</a>
      and is available as an
      <a href="https://www.npmjs.com/package/@covalent/data">npm package</a>
      .
    </p>
    <p>
      Covalent Quickstart integrates Covalent Data in its installation, so no
      additional steps are required to use it. In the covalent quickstart
      directory, simply run:
    </p>
    <td-highlight>npm run start-api</td-highlight>
    <p>You should see the server running starting with:</p>
    <td-highlight codeLang="bash">
      INFO[0000]
      ##################################################################
      INFO[0000] ######## ######## INFO[0000] ######## Teradata Covalent Atomic
      Data mock API server ######## INFO[0000] ######## Copyright 2016 by
      Teradata. All rights reserved. ######## INFO[0000] ######## This software
      is covered under the MIT license. ######## INFO[0000] ######## ########
      INFO[0000]
      ##################################################################
    </td-highlight>
    <p>
      The server is running as a background process so it's still possible to
      use the terminal for other commands. To stop covalent data, type:
    </p>
    <td-highlight>npm run stop-api</td-highlight>
    <mat-divider></mat-divider>
    <h3>Customizing Mock Data Schema</h3>
    <p>
      You can easily modify or create new schemas for mock data in the
      <code>/mock-api/schemas/</code>
      directory.
    </p>
    <p>
      For example to modify the mock users , edit
      <code>mock-api/schemas/users.yaml</code>
    </p>
    <td-highlight codeLang="bash">
      # this is a sample schema file for a user object. --- initial_entries: 10
      randomize: false displayname: _firstname_ _lastname_ id:
      _firstname_._lastname_ email: _firstname_._lastname_&#64;_company_.com
      created: _createdtimestamp_ last_access: _itemtimestamp_ site_admin:
      _admin_ ...
    </td-highlight>
    <h3>Modifying Mock Data</h3>
    <p>
      Dynamic data is wrapped in _underscores_ that match up to text files in
      <code>/mock-api/datum/</code>
      .
    </p>
    <p>
      For example the
      <code>_firstname_</code>
      in the yaml above just looks for
      <code>/mock-api/datum/firstname.txt</code>
      , and each value is on a single line:
    </p>
    <td-highlight codeLang="bash">Aaron Benjamin Carl Olive ...</td-highlight>
    <h3>Consuming Mock Data Endpoints</h3>
    <p>
      The Mock API Server generates real endpoints that can be consumed in
      Angular services.
    </p>
    <td-highlight codeLang="typescript">
      {{ mockApiDataTypescript }}
    </td-highlight>
    <p>
      The Covalent Data Mock API Server actually stores data in memory, so it's
      possible to add, update, and delete records. All changes made will be
      erased once Covalent Data is stopped. See the Covalent Data repo for more
      information.
    </p>
  </mat-card-content>
  <mat-divider></mat-divider>
  <mat-card-actions>
    <a
      mat-button
      color="accent"
      target="_blank"
      href="https://github.com/teradata/covalent-quickstart"
    >
      Quickstart repo
    </a>
    <a
      mat-button
      color="primary"
      target="_blank"
      href="https://github.com/teradata/covalent-data"
    >
      Data repo
    </a>
  </mat-card-actions>
</mat-card>
